<template>
  <div class="UserDefined">
    <!--顶部-->
    <div class="sectionOne">
      <el-row>
        <el-col :span="20">
          <div class="grid-content bg-purple">
            注：所有自定义详情页在此添加，编辑完成后可生成链接
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light" style="text-align: right">
            <el-button
              style="width:87px;background-color: #1BA687;color:#ffffff"
              @click="dialogVisible = true"
              size="small">
              添加
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--数据列-->
    <div class="sectionTwo">
      <el-row class="first">
        <el-col :span="2">
          <div class="grid-content bg-purple-dark">序号</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">页面名称</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">标题</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">生成链接</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">操作</div>
        </el-col>
      </el-row>
      <el-row class="second">
        <el-col :span="2">
          <div class="grid-content bg-purple-dark">1</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark img">
            邀请vip
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark sort">
            【超级VIP分享】听说保险和阔旗更配
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark detailLink">
            https://lanhuapp.com
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">
            <el-button type="primary" size="small">复制链接</el-button>
            <el-button type="primary" @click="dialogVisible = true" size="small">编辑</el-button>
            <el-button type="info" size="small" style="background-color: #2B333E">删除</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--分页-->
    <div class="paging">
      <el-pagination
        background
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
    <!--模态框-->
    <div class="modal">
      <el-dialog
        width="75%"
        top="0.5vh"
        title="编辑自定义详情"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        @close="close"
        :visible.sync="dialogVisible">

        <div class="dialog-contain">
          <el-row type="flex" class="row-bg">
            <el-col :span="2">
              <div class="grid-content bg-purple-dark" style="padding-right:10px;line-height:35px;text-align: right">
                <span style="color:#FF0000;padding:0 5px;">*</span>页面名称:
              </div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple-dark">
                <el-input v-model="pageName" placeholder="请输入页面名称"></el-input>
              </div>
            </el-col>
          </el-row>

          <el-row type="flex" class="row-bg">
            <el-col :span="2">
              <div class="grid-content bg-purple-dark" style="padding-right:10px;line-height:35px;text-align: right">
                标题:
              </div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple-dark">
                <el-input v-model="pageTitle" placeholder="请输入页面名称"></el-input>
              </div>
            </el-col>
            <el-col :span="1">
              <div class="grid-content bg-purple-dark" style="padding-left:10px;line-height:35px;">
                0/30
              </div>
            </el-col>
          </el-row>

          <el-row type="flex" class="row-bg upload">
            <el-col :span="2">
              <div class="grid-content bg-purple-dark" style="padding-right:10px;line-height:35px;text-align: right">
                广告图:
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-dark">
                <label for="file1" class="upload">点击上传</label>
                <input id="file1" class="file" type="file" @change="getImg($event)"  >
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-dark suggest">
                （建议宽度：750px）
              </div>
            </el-col>
          </el-row>

          <el-row type="flex" class="row-bg effectImg">
            <el-col :span="2">
              <div class="grid-content bg-purple-dark"></div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-dark">
                <p class="effectImg">
                  <i class="el-icon-picture"></i>
                  <img :src="pictureCover" class="img" alt="" width="165" height="119">
                </p>
              </div>
            </el-col>
          </el-row>

          <el-row type="flex" class="row-bg upload">
            <el-col :span="2">
              <div class="grid-content bg-purple-dark" style="padding-right:10px;line-height:35px;text-align: right">
                广告视频:
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-dark">
                <label for="file2" class="upload">点击上传</label>
                <input id="file2" class="file" type="file" @change="getImg($event)">
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-dark suggest">
                （建议宽度：750px）
              </div>
            </el-col>
          </el-row>

          <el-row type="flex" class="row-bg effectImg">
            <el-col :span="2">
              <div class="grid-content bg-purple-dark"></div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-dark">
                <p class="effectImg">
                  <i class="el-icon-picture"></i>
                  <video :src="videoCover" class="img" width="165" height="119"></video>
                </p>
              </div>
            </el-col>
          </el-row>

          <el-row type="flex" class="row-bg detail">
            <el-col :span="2">
              <div class="grid-content bg-purple-dark" style="padding-right:10px;line-height:35px;text-align: right">
                详情:
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple-dark">
                <el-input
                  v-model="detail"
                  class="textarea"
                  type="textarea"
                  rows="15"
                  placeholder="请输入内容"
                  show-word-limit
                  resize="none"
                >
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保存信息</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserDefined',
  data() {
    return {
      options: [{
        value: '选项1',
        label: '无关注广告'
      }, {
        value: '选项2',
        label: '链接区下方'
      }, {
        value: '选项3',
        label: '每隔5条动态下方'
      }, {
        value: '选项4',
        label: '每隔10条动态下方'
      }, {
        value: '选项5',
        label: '每隔15条动态下方'
      }, {
        value: '选项6',
        label: '每隔20条动态下方'
      }],
      value: '',
      dialogVisible: false,
      pageName: '',
      pageTitle: '',
      pictureCover: '',
      videoCover: '',
      detail: ''
    }
  },
  methods: {
    getImg(e) {
      const curId = e.target.id;
      const file = e.target.files[0];
      const that = this;
      const reader = new FileReader();
      reader.readAsDataURL(file);
      if (curId === 'file1') {
        reader.onload = function() {
          if (/image/.test(this.result)) {
            that.pictureCover = this.result;
          } else {
            alert('格式不正确，请上传图片格式');
          }
        }
      }
      if (curId === 'file2') {
        reader.onload = function() {
          if (/video/.test(this.result)) {
            that.videoCover = this.result;
          } else {
            alert('格式不正确，请上传视频格式');
          }
        }
      }
    },
    save() {
      this.dialogVisible = false;
      console.log(this.pageName);
      console.log(this.pageTitle);
      console.log(this.pictureCover);
      console.log(this.videoCover);
      console.log(this.detail);
    },
    close() {
      this.pageName = '';
      this.pageTitle = '';
      this.pictureCover = '';
      this.videoCover = '';
      this.detail = '';
    }
  }
}
</script>

<style scoped lang="scss">
  .UserDefined {
    margin-top: 20px;
    margin-left: 20px;

    .sectionOne {
      width: 99%;
      margin-top: 20px;
      color: #E51C23;
      font-size: 14px;

    }

    .sectionTwo {
      overflow: auto;
      width: 99%;
      max-height: 650px;
      margin-top: 20px;

      .grid-content {
        border: 1px solid #DDDDDD;
      }

      .first {
        line-height: 30px;
        background-color: #F5F5F5;
        font-size: 14px;
        text-align: center;
      }

      .second {
        background-color: rgba(248, 248, 248, 1);
        text-align: center;

        .grid-content {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          height: 100px;
          line-height: 100px;
        }

        .img {
          .img {
            width: 138px;
            height: 79px;
            margin: 10px auto;
            background-color: #eeeeee;

            img {
              width: 100%;
              height: 100%;
            }
          }

        }

        .detailLink {
          height: 102px;

          .link {
            width: 336px;
            height: 25px;
            margin: 36px auto;
            background-color: #eeeeee;
            color: #333333;
            line-height: 20px;
            text-align: center;
            font-size: 14px;
            border: 1px solid #bbbbbb;
          }
        }

        .sort {
          height: 102px;

          .sort {
            width: 102px;
            height: 25px;
            margin: 36px auto;
            background-color: #eeeeee;
            color: #333333;
            line-height: 20px;
            text-align: center;
            font-size: 14px;
            border: 1px solid #bbbbbb;
          }
        }
      }
    }

    .paging {
      float: right;
      margin-top: 20px;
    }

    .editor {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .5);
    }

    .modal {
      .dialog-contain {
        .el-row {
          margin: 30px 0;
        }

        .upload {
          .upload {
            display: inline-block;
            width: 110px;
            height: 36px;
            line-height: 36px;
            background-color: #F9F9F9;
            text-align: center;
            border: 1px solid #DDDDDD;
          }

          .file {
            opacity: 0;
            width: 10px;
            height: 10px;
            margin-left: -110px;
          }

          .suggest {
            line-height: 36px;
            color: #FF0000;
          }
        }

        .effectImg {
          .effectImg {
            position: relative;
            width: 165px;
            height: 119px;
            line-height: 119px;
            text-align: center;
            background-color: #DDDDDD;
            .el-icon-picture{
              display:inline-block;
              font-size: 28px;
              color: #8c939d;
            }
            .img{
              position: absolute;
              top:0;
              left:0;
            }
          }
        }
        .detail {
          .textarea {
            overflow: auto;
          }
        }
      }
    }
  }
</style>
